<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>类选择器</title>
		<style>
			.traffic-lights{
				width: 350px;
				background-color: silver;
				display: flex;
				justify-content: space-between;
				padding: 20px;
				
			}
			.light{
				width: 100px;
				height: 100px;
				border: 1px solid black;
				border-radius: 50%;
			}
			.red{background-color: red; order: 1;}
			.yellow{ background-color: yellow; order: 3;}
			.green{background-color: green; order: 2;}
		</style>
	</head>
	<body>
		<figure class="traffic-lights">
			<div class="light red"></div>
			<div class="light yellow"></div>
			<div class="light green"></div>
		</figure>
	</body>
</html>
